<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <title>订单页面</title>

    <link href="../mycss/order.css" rel="stylesheet"/>
    <link href="../bootstrap-3.3.7-dist/css/starter-template.css" rel="stylesheet"/>
	<link rel="stylesheet" href="../mycss/main.css"/>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>	
  	<script type="text/javascript">
  			 
    		function req(json){
    				var c = $("#userId").val();
					var url = "http://58.87.74.194:9090/paymsg?requestBody=";
					json = encodeURIComponent(json);
					url = url + json;
					window.location.replace(url);
				}
				
    		$(document).ready(function(){
	    		$("#submit-order").click(function(){
	    			var mydata={
			    	    userId:$("#userId").val(),
				    	d1:$("#d1").val(),
				    	d2:$("#d2").val(),
				        houseId:$("#houseId").val(),
				    	peopleCounts:$("#peopleCounts").val(),
				    	bookerName:$("#bookerName").val(),
				    	phoneNumber:$("#phoneNumber").val(),
				    	occupantName:$("#occupantName").val(),
				    	occupantNumber:$("#occupantNumber").val(),
			    	};
			    	
		   			$.ajax({
		   				url:"http://58.87.74.194:8031/order/waitinit",
		   				type:"post",
		   				dataType:"json",
		   				data:mydata,
		   				success:function(data){
		   					req(JSON.stringify(data));
		   				},
		   				error: function (XMLHttpRequest, textStatus, errorThrown) {
			                // 状态码
			                console.log(XMLHttpRequest.status);
			                // 状态
			                console.log(XMLHttpRequest.readyState);
			                // 错误信息
			                console.log(textStatus);
           				}
		   			});/**end of ajax*/
	   			});//end of submit
   			});
   	</script>
  </head>
  
  
  <body style="background-color:#f5f5f5">
    <!--引用页面头部-->
	<div th:include="header :: header"></div>
	<div class="container-fluid panel">

	<!-- 主内容面板 -->
	<div id="content" class="container-fluid" style="width:75%;height:75%">
		<div class="row main-content">
			<div class="col-md-12 column">
				<!-- 左侧内容放在左边 -->
				<div class="col-md-12 border" style="background-color: #FFFFFF;margin-bottom:20px;">
					<!-- 预定信息 -->
					<div class="row">
						<div class="col-md-12 column">
							<div class="row">
								<div class="col-md-12 border-bottom-solid" style="margin-bottom:20px">
									<h2>预订信息</h2>
								</div>
							</div>
								<div class="row"  style="margin-bottom:20px">
									<div class="col-md-12 col-sm-12 col-xs-12 column">
										<div class="col-md-3 col-sm-4">
											<p class="lead">预订日期</p>
										</div>
										<div class="col-md-9 col-sm-8 column" th:each="house:${houseList}">
											<input type="text" id="userId" name="userId" th:value="${userId}" style="display:none;"/>
											<input type="text" id="houseId" name="houseId" th:value="${house.id}" style="display:none;"/>
											<input type="date"  id="d1" name="d1" value=""/>
											<span class="glyphicon glyphicon-resize-horizontal"></span>
											<input type="date"  id="d2" name="d2"   value=""/>
										</div>
									 </div>
								</div>
						<!-- <div class="row">
								<div class="col-md-12 column">
									<div class="col-md-3">
										<p class="lead">预留套数</p>
									</div>
									<div class="col-md-9">
										<input type="text" id="" name="" class="from-control" placeholder="1"/>
									</div>
								</div>
							</div>
							 -->	
							<div class="row">
								<div class="col-md-12 column">
									<div class="col-md-3">
										<p class="lead">入住人数</p>
									</div>
									<div class="col-md-9">
										<input type="text" id="peopleCounts" value="" name="peopleCounts" class="from-control" placeholder="最多入住4人"/>
									</div>
								</div>
							</div>
						</div>
					</div><!-- 预定信息 -->
					
					<!-- 预订人信息 -->
					<div class="row">
						<div class="col-md-12 column">
							<div class="row">
								<div class="col-md-12 column border-bottom-solid"  style="margin-bottom:20px">
									<h2>预订人信息</h2>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12 column">
										<div class="col-md-3">
											<p class="lead">姓名</p>
										</div>
										<div class="col-md-9">
											<input type="text" id="bookerName" name="bookerName" value="" class="from-control"/>
										</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12 column">
									<div class="col-md-3">
										<p class="lead">手机号</p>
									</div>
									<div class="col-md-9">
										<input type="text" id="phoneNumber" name="phoneNumber" value="" class="from-control"/>
									</div>
								</div>
							</div>
							<!-- 暂时不要验证码和短信验证码
							<div class="row">
								<div class="col-md-12 column">
									<div class="col-md-3">
										<p class="lead">验证码</p>
									</div>
									<div class="col-md-9">
										<input type="text" class="from-control"/>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12 column">
									<div class="col-md-3">
										<p class="lead">短信验证码</p>
									</div>
									<div class="col-md-9">
										<input type="text" class="from-control"/>
									</div>
								</div>
							</div>
							 -->
						</div>
					</div><!-- 预订人信息 -->
					
					<!-- 入住人信息 -->
					<div class="row">
						<div class="col-md-12 column">
							<div class="row">
								<div class="col-md-12 column border-bottom-solid"  style="margin-bottom:20px">
									<h2>入住人信息</h2>
								</div>
							</div>
							<div class="row" style="margin-bottom:20px">
								<div class="col-md-12 column">
									<div class="col-md-3">
										<p class="lead">入住人姓名</p>
									</div>
									<div class="col-md-9">
										<input type="text" id="occupantName" name="occupantName" value="" class="from-control" placeholder="真实姓名"/>
									</div>
								</div>
							</div>
							
							<div class="row"  style="margin-bottom:20px">
								<div class="col-md-12 column">
									<div class="col-md-3"  style="margin-bottom:20px">
										<!-- 下拉输入框 -->
										<div class="input-group">
											<div class="btn-group">
												 <button class="btn btn-default">身份证</button><button data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
													<ul class="dropdown-menu">
														<li>
															 <a href="#">军官证</a>
														</li>
														<li class="disabled">
															 <a href="#">驾驶证</a>
														</li>
														<li class="divider">
														</li>
														<li>
															 <a href="#">其它</a>
														</li>
													</ul>
											</div><!-- end of btn-group -->
										</div>
									</div>
									<div class="col-md-9">
										<input type="text"  id="occupantNumber" name="occupantNumber" value="" class="from-control" placeholder="证件号码"/>
										<!-- <button type="button" class="btn btn-success">保存</button>  -->
									</div>
								</div>
							</div>
						</div>		
					</div><!-- 入住人信息 -->
					
					<!-- 房东规定 -->
					<div class="row margin-top-20px">
						<div class="col-md-12 column">
							<div class="row">
								<div class="col-md-12 column border-bottom-solid" style="margin-bottom:20px">
									<h2>房东规定</h2>
								</div>
							</div>
							
							<div class="row">
								<div class="col-md-12 column">
									<div class="col-md-6">
										<p class="text-muted">退款政策：入住前7天可全款退款</p>
									</div>
									<div class="col-md-6">
										<a href="#" class="bg-success">更多详情</a>
									</div>
								</div>
							</div>
						</div>
					</div><!-- end of 房东规定 -->
					
					<!-- 提交按钮 -->
					<div class="row margin-tb-20px">
						<div class="col-md-12 column">
							<button type="button" id="submit-order" class="btn btn-success btn-lg submit-order">提交订单</button>						
						</div>
					</div>
			</div><!-- end of 左侧内容 -->
			</div>
		</div>	
	</div>

	<br/><br/><br/><br/><br/><br/>
	</div><!-- end of panel -->
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    
  </body>
</html>
